<!DOCTYPE html>
<html lang="zh - CN">
<head>
    <title>农产品管理菜单</title>
    <meta http - equiv="Content - Type" content="text/html; charset=utf-8">
    <link href="left.files/style_left.css" type="text/css" rel="stylesheet">
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
        }
        /* 整体表格样式优化 */
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table td {
            padding: 10px;
        }
        /* 菜单列表样式 */
      .menu {
            list-style: none;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
      .menu li {
            margin-bottom: 10px;
        }
      .menu a {
            text-decoration: none;
            color: #333;
            display: block;
            padding: 10px;
            border-radius: 3px;
            transition: background-color 0.3s ease;
        }
      .menu a:hover {
            background-color: #f0f0f0;
        }
        /* 版权信息样式 */
      .copyright {
            text-align: center;
            margin-top: 10px;
            color: #999;
            font-size: 12px;
        }
        /* 商品列表表格样式 */
      .commodity - table {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
        }
      .commodity - table th,
      .commodity - table td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: left;
        }
      .commodity - table th {
            background-color: #f8f9fa;
        }
        /* 商品图片展示样式 */
      .commodity - image {
            max-width: 80px;
            max-height: 80px;
            border-radius: 5px;
        }
    </style>
    <script>
        // 假设这是从数据库获取的数据，这里只是示例数据
        var agriculturalProducts = [
            {
                id: 1,
                name: "小麦",
                price: 5,
                quantity: 90,
                description: "可磨粉制面食，温带多植冬小麦，秋播夏收；寒地种春小麦，春播秋收。",
                image: "wheat.jpg"
            },
            {
                id: 2,
                name: "水稻",
                price: 3,
                quantity: 70,
                description: "亚洲主粮，需水多，分籼粳稻，南方多双季稻，北方单季稻。",
                image: "rice.jpg"
            }
        ];
        window.onload = function() {
            var tbody = document.querySelector('.commodity - table tbody');
            agriculturalProducts.forEach(function(product) {
                var row = document.createElement('tr');
                var imageCell = document.createElement('td');
                var image = document.createElement('img');
                image.src = product.image;
                image.alt = product.name;
                image.classList.add('commodity - image');
                imageCell.appendChild(image);
                row.appendChild(imageCell);
                var nameCell = document.createElement('td');
                nameCell.textContent = product.name;
                row.appendChild(nameCell);
                var priceCell = document.createElement('td');
                priceCell.textContent = product.price;
                row.appendChild(priceCell);
                var quantityCell = document.createElement('td');
                quantityCell.textContent = product.quantity;
                row.appendChild(quantityCell);
                var descriptionCell = document.createElement('td');
                descriptionCell.textContent = product.description;
                row.appendChild(descriptionCell);
                tbody.appendChild(row);
            });
        };
    </script>
</head>
<body>
    <table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
        <tbody>
            <tr>
                <td style="padding - top: 10px" valign="top">
                    <table class="alpha">
                        <tbody>
                            <tr>
                                <td class="menu" id="menubar" valign="top">
                                    <ul>
                                        <li><a href="CommodityClassAction!listCommodityClass.action" target="frmright">商品分类列表</a></li>
                                        <li><a href="CommodityAction!listCommodity.action" target="frmright">商品列表</a></li>
                                        <li><a href="OrderFormAction!listOrderForm.action" target="frmright">订单列表</a></li>
                                        <li><a href="UserAction!listUser.action" target="frmright">用户列表</a></li>
                                        <li><a href="include/admin/amend.jsp" target="frmright">修改登录密码</a></li>
                                    </ul>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td class="copyright">版权所有 &copy; [具体版权信息] </td>
            </tr>
            <tr>
                <td>
                    <table class="commodity - table">
                        <thead>
                            <tr>
                                <th>商品图片</th>
                                <th>商品名称</th>
                                <th>商品价格</th>
                                <th>库存数量</th>
                                <th>商品描述</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>